<style lang="scss" scoped>
    .card {
        padding: 30px 15px 0;
        background: white;
        border-radius: 3px;
        box-shadow: 0 3px 10px rgba(#ddd, .4);

        .title {
            font-size: 20px;
        }

        .card-header {
            display: flex;
            flex-direction: row;

            .title {
                width: 100px;
            }

            .date {
                flex: 1;
                text-align: right;
            }
        }
    }
</style>

<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="card">
                    <div class="title">今日订单</div>
                    <div>
                        <vepie :data="todayOrder"></vepie>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card">
                    <div class="title">近七日订单</div>
                    <div>
                        <vepie :data="sevenDays"></vepie>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card">
                    <div class="title">近15日订单</div>
                    <div>
                        <vepie :data="fifteenDays"></vepie>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card">
                    <div class="title">近30日订单</div>
                    <div>
                        <vepie :data="thirtyDays"></vepie>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <div class="card">
                <div class="title">30天订单走势图</div>
                <div>
                    <veline :data="thirtyDaysOrderChanges"></veline>
                </div>
            </div>
        </el-row>
    </div>
</template>

<script>
    import veline from 'v-charts/lib/line.common';
    import vepie from 'v-charts/lib/pie.common';
    /* import vehistogram from 'v-charts/lib/histogram.common';
     import vewaterfall from 'v-charts/lib/waterfall.common';*/
    //import moment from 'moment'

    let pagerHeader = null;
    export default {
        name: "dashboard",
        components: {
            veline,
            vepie,
        },
        data() {
            return {
                thirtyDaysOrderChanges: {
                    columns: ['日期', '订单总数', '线上订单', '线下订单'],
                    rows: [
                        {'日期': '1/1', '订单总数': 170, '线上订单': 120, '线下订单': 50},
                        {'日期': '1/2', '订单总数': 220, '线上订单': 150, '线下订单': 70}
                    ]
                },
                todayOrder: {
                    columns: ['类型', '数量'],
                    rows: [
                        {'类型': '线上订单', '数量': 0},
                        {'类型': '线下订单', '数量': 0}
                    ]
                },
                sevenDays: {
                    columns: ['类型', '数量'],
                    rows: [
                        {'类型': '线上', '数量': 0},
                        {'类型': '线下', '数量': 0}
                    ]
                },
                fifteenDays: {
                    columns: ['类型', '数量'],
                    rows: [
                        {'类型': '线上', '数量': 0},
                        {'类型': '线下', '数量': 0}
                    ]
                },
                thirtyDays: {
                    columns: ['类型', '数量'],
                    rows: [
                        {'类型': '线上', '数量': 0},
                        {'类型': '线下', '数量': 0}
                    ]
                },
            }
        },
        activated() {
            this.setPageHead(pagerHeader)
        },
        created() {
            this.setPageHead(pagerHeader)
        },
        methods: {
            //设置页头信息
            setPageHead(data) {
                if (this.$store) {
                    this.$store.commit('setSysPagerHeader', data)
                }
            },
        }
    }
</script>


